<template>
<div class='mb-1 space-y-0.5 px-3 py-1' v-if="filteredOutputs.length">
      <div v-for="(item,index) in data " :key="index" class='flex h-6 items-center justify-between space-x-1 rounded-md  bg-gray-100 px-1 text-xs font-normal text-gray-700'>
        <div class='flex items-center text-xs font-medium text-gray-500'>
          <div v-if="!item.isEnv && !item.isChatVar" class='max-w-[75px] truncate'>{{item.node?.data.title}}</div>
             
          <div class='flex items-center text-primary-600'>
            <div :class="cn('ml-0.5 max-w-[50px] truncate text-xs font-medium', (item.isEnv || item.isChatVar) && '!max-w-[70px] text-gray-900')">{{item.varName}}</div>
          </div>
        </div>
        <div class='text-xs font-normal text-gray-700'>
          <div class='ml-0.5 max-w-[42px] truncate text-xs font-normal capitalize text-gray-500' :title="item.varType">{{item.varType}}</div>
        </div>
      </div>
    </div>
</template>
<script setup lang="ts" name="EndNode">
import {computed} from 'vue';
import cn from 'classs'
import type { EndNodeType } from './types'
import type { NodeProps, Variable } from '@/components/workflow/types'
import { isConversationVar, isENV, isSystemVar } from '@/components/workflow/nodes/_base/components/variable/utils'
import {
  useIsChatMode,
  useWorkflow,
  useWorkflowVariables,
} from '@/app/components/workflow/hooks'
import { BlockEnum } from '@/app/components/workflow/types'


const props = defineProps<NodeProps<EndNodeType>>();
  const { getBeforeNodesInSameBranch } = useWorkflow()
  const availableNodes =  getBeforeNodesInSameBranch(props.id)
  const { getCurrentVariableType } = useWorkflowVariables()
  const isChatMode = useIsChatMode()

  const startNode = availableNodes.find((node: any) => {
    return node.data.type === BlockEnum.Start
  })

  const getNode = (id: string) => {
    return availableNodes.find(node => node.id === id) || startNode
  }

 const filteredOutputs = computed(()=> (props.data.outputs as Variable[]).filter(({ value_selector }) => value_selector.length > 0)) 

 const data = computed(()=>{
   return filteredOutputs.value.map(({ value_selector }, index) => {
        const node = getNode(value_selector[0])
        const isSystem = isSystemVar(value_selector)
        const isEnv = isENV(value_selector)
        const isChatVar = isConversationVar(value_selector)
        const varName = isSystem ? `sys.${value_selector[value_selector.length - 1]}` : value_selector[value_selector.length - 1]
        const varType = getCurrentVariableType({
          valueSelector: value_selector,
          availableNodes,
          isChatMode,
        })
        return {
          node,isSystem,isENV,isChatVar,varName,varType,isEnv
        }
      }) 
 }) 
  </script>